<div class="Paginate page-row">
    <div class="Paginate-wrapper" ng-hide="dataset.count <= pageSize">
        <ul class="Paginate-controls pagination">
            <!-- first -->
            <li class="page-item Paginate-controls--first Paginate-controls--item" ng-hide="pageRange.length < maxVisiblePages || pageRange[0] === 1">
                <a aria-label="{{'Go to page 1 of list' | translate}}" href class="page-link" ng-click="toPage(1)">
                    <i class="fa fa-angle-double-left"></i>
                </a>
            </li>
            <!-- previous -->
            <li class="page-item Paginate-controls--previous Paginate-controls--item" ng-class="{disabled: current === 1}">
                <a aria-label="{{'Go to previous page of list' | translate}}" href class="page-link" ng-click="toPage(current - 1)">
                    <i class="fa fa-angle-left"></i>
                </a>
            </li>
            <!-- range -->
            <li class="page-item Paginate-controls--item" ng-repeat="page in pageRange">
                <a aria-label="{{'Go to current page of list' | translate}}" href class="page-link" ng-class="{'Paginate-controls--active': page === current}" ng-click="toPage(page)">{{ page }}</a>
            </li>
            <!-- next -->
            <li class="page-item Paginate-controls--next Paginate-controls--item" ng-class="{disabled: current === last}">
                <a aria-label="{{'Go to next page of list' | translate}}" href class="page-link" ng-click="toPage(current + 1)">
                    <i class="fa fa-angle-right"></i>
                </a>
            </li>
            <!-- last -->
            <li class="page-item Paginate-controls--item Paginate-controls--last" ng-hide="(pageRange.length < maxVisiblePages || pageRange[pageRange.length-1] === last)">
                <a aria-label="{{'Go to last page of list' | translate}}"href class="page-link" id="{{iterator}}-last-page-set" ng-click="toPage(last)">
                    <i class="fa fa-angle-double-right"></i>
                </a>
            </li>
        </ul>
        <span class="Paginate-pager--pageof">{{ 'Page' | translate }}
                <span id="{{iterator}}-current-page">{{current}}</span> {{ 'of' | translate }}
        <span id="{{iterator}}-total-pages">{{last}}</span>
        </span>
    </div>
    <div class="Paginate-total page-label" ng-hide="dataset.count === 0">
        <!-- TODO: Move the ITEMS line into paginate.directive.js
             so that i18n.sprintf("A of B") can be used but
             it seems $sce.trustAsHtml() does not work with html tag.
         -->
        <span class="Paginate-itemsOf">{{ 'ITEMS' | translate }}&nbsp;
            <span>{{dataRange}}</span>
            <span ng-hide="dataset.count <= basePageSize">{{ 'of' | translate }} {{dataset.count | number}}</span>
        </span>
        <div class="Paginate-filteringDropdowns" ng-hide="hideViewPerPage || dataset.count <= basePageSize">
            <div class="Paginate-filterLabel" translate>VIEW PER PAGE</div>
            <div class="DashboardGraphs-periodDropdown">
                <a role="button"
                aria-label="{{'Show page size options' | translate}}"
                data-toggle="dropdown"
                data-target="#"
                href="/page.html"
                class="DashboardGraphs-filterDropdownText">
                    <translate>{{pageSize}}</translate> <i class="fa fa-angle-down DashboardGraphs-filterIcon"></i>
                </a>
                <ul class="dropdown-menu DashboardGraphs-filterDropdownItems
                    DashboardGraphs-filterDropdownItems--period Paginate-dropdown" role="menu" aria-labelledby="period-dropdown">
                    <li>
                        <a ng-click="filter(20)" translate>20</a>
                    </li>
                    <li>
                        <a ng-click="filter(50)" translate>50</a>
                    </li>
                    <li>
                        <a ng-click="filter(100)" translate>100</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
